<template >
   <div>
     <div class="form_wrap">
      <el-form inline>
        <el-form-item label="岗位编码">
          <el-input v-model="searchObj.postCode"></el-input>
        </el-form-item>
        <el-form-item label="岗位名称">
          <el-input v-model="searchObj.postName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select style="width:200px;" v-model="searchObj.status">
            <el-option value="1" label="正常"></el-option>
            <el-option value="0" label="停用"></el-option>
          </el-select>
        </el-form-item>
   
      </el-form>
      <div>
        <el-button type="primary" @click="getList">搜索</el-button>
        <el-button>重置</el-button>
      </div>
     </div>
     <div class="table_wrap">
      <div style="margin: 20px 0;">
        <el-button @click="openDia" :icon="Plus"  type="primary">新增</el-button>
        <el-button  type="primary">修改</el-button>
        <el-button  type="danger" @click="toDelAll">删除</el-button>
        <el-button  type="warning">导出</el-button>
      </div>
      <el-table ref="postTable" :data="postList" row-key="postId">
        <el-table-column  type="selection" width="55"></el-table-column>
        <el-table-column label="岗位编号" width="100" type="index"></el-table-column>
        <el-table-column label="岗位编码" prop="postCode"></el-table-column>
        <el-table-column label="岗位名称" prop="postName"></el-table-column>
        <el-table-column label="岗位排序" prop="postSort
"></el-table-column>
        <el-table-column label="岗位状态">
            <template #default="{row}">
              <el-tag v-if="row.status==='1'" type="success">正常</el-tag>
              <el-tag v-if="row.status==='0'" type="danger">停用</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="操作">
          <template #default="{row}">
            <div>
                <el-link  style="margin-right:20px;" :icon="Edit"  type="primary" @click="toEdit(row.postId)">修改</el-link>
                <el-link :icon="Delete" @click="toDel(row.postId)"  type="primary">删除</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total"
          v-model:page="searchObj.pageNum"
          v-model:limit="searchObj.pageSize"
          @pagination="getList"
      ></Pagination>
     </div>
     <!-- 添加和修改的弹出层 -->
      <el-dialog v-model="postFlag" width="50%" :title="postTitle">
        <el-form  ref="postFormRef" :rules="rules" :model="formObj">
          <el-form-item label="岗位名称" prop="postName">
            <el-input v-model="formObj.postName"></el-input>
          </el-form-item>
          <el-form-item label="岗位编码" prop="postCode">
            <el-input v-model="formObj.postCode"></el-input>
          </el-form-item>
          <el-form-item label="岗位顺序" prop="postSort">
            <el-input-number
                v-model="formObj.postSort"
                :min="1"
                :max="10"
                controls-position="right"
                size="large"
                @change="handleChange"
              />
          </el-form-item>
          <el-form-item label="岗位状态">
            <el-radio-group v-model="formObj.status">
              <el-radio value="1">正常</el-radio>
              <el-radio value="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="formObj.remark"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="toSavePost">确定</el-button>
          <el-button @click="postFlag=false">取消</el-button>
        </template>
      </el-dialog>
   </div>
 </template>
 <script setup >
   import {Plus,Delete,Edit} from '@element-plus/icons-vue'
 import Pagination from '@/components/Pagination/index.vue'
 import {listPost,addPost,getPost,updatePost,delPost} from '@/api/system/post'
 import {ref,reactive} from 'vue'
 import {ElMessage} from 'element-plus'
//  import {ElMessage} from 'element-plus'
 let total=ref(100) //分页器总条数
 let postList=ref([])// 岗位列表数据
let postTitle=ref("添加岗位")
// 搜索条件
let searchObj=reactive({
  pageNum:1,
  pageSize:5,
  postName:'',
  postCode:'',
  status:''
})
 let getList= async ()=>{ //获取岗位列表接口
     let res=await listPost(searchObj)
     console.log(res,"岗位列表数据")
     total.value=res.total;
     postList.value=res.rows;
 }
 getList();
// 添加操作
let postFlag=ref(false);//弹出层的控制变量
let openDia=()=>{ //打开弹出层
  postFlag.value=true; 
}
let formObj=reactive({ //收集增加和修改需要的数据
  postName:'', //名称
  postCode:'', //编码
  postSort:0,//排序
  status:'1',//状态
  remark:''//备注
})

let rules={
  postName:[{required:true,message:'岗位名称不能为空',trigger:"blur"}],
  postCode:[{required:true,message:'岗位编码不能为空',trigger:"blur"}],
  postSort:[{required:true,message:'岗位排序不能为空',trigger:"blur"}]
}
// 增加岗位接口
let postFormRef=ref(null)//获取表单组件
let toSavePost=()=>{
  postFormRef.value.validate(async (vali)=>{
    if(vali){
      if(formObj.postId){
        let editRes=await updatePost(formObj)
        console.log(editRes,"修改成功")
        ElMessage.success("修改成功")
      }else{
        let res=await addPost(formObj)//增加接口
          console.log(res,"增加成功")
          ElMessage.success("添加刚才成功")
      }
  
      getList();//重新获取列表
      postFormRef.value.resetFields()//重置表单
      postFlag.value=false;//关闭弹出层
      
    }
  })

}
// 岗位详情接口  --回显
let toEdit=async (postId)=>{
  let res=await getPost(postId)
  console.log(res,"岗位详情")
  postFlag.value=true;
  postTitle.value="修改岗位"
  // formObj=res.data //回显
  formObj.postId=res.data.postId
  formObj.postName=res.data.postName
  formObj.postCode=res.data.postCode
  formObj.postSort=res.data.postSort
  formObj.remark=res.data.remark
  formObj.createTime=res.data.createTime
  formObj.createBy=res.data.createBy
}


// 删除接口
let toDel=async (postId)=>{
  let res=await delPost(postId)  
  console.log(res,"删除成功")
  ElMessage.success("删除成功")
  getList()
}
let postTable=ref(null)
let toDelAll=()=>{
  // 获取表格 多选的行数据getSelectionRows() 
  let ids=postTable.value.getSelectionRows().map(item=>item.postId)
  console.log(ids,"-------------------ids")
  toDel(ids.toString()) //删除方法
}
let handleChange=(val)=>{
  console.log(val,"排序")

}
 </script>
 <style lang="scss" scoped>
    .form_wrap{
      padding: 20px;
      box-sizing: border-box;
    }
    .table_wrap{
      padding: 20px;
      box-sizing: border-box;
    }
 </style>